<template>
    <div class="pay-pwd">
        <div>{{title}}</div>
        <div class="pay-password">
            <input type="tel" maxlength="6" class="real-ipt" v-model="realInput"  @keyup="getNum()" @keydown="delNum()" id="focusid" @input="clickEvent">
            <div class="surface-ipts">
                <div class="surface-ipt">
                    <input type="password" maxlength="1" v-for="(disInput,index) in disInputs" :key="index" v-model="disInput.value">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data(){
        return{
            realInput:'',
            disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],
        }
    },
    props:{
        title:{
            type: String,
            default:'支付密码'
        }
    },
    methods:{
        getNum(){
            for(var i=0;i<this.realInput.length;i++){
                this.disInputs[i].value=this.realInput.charAt(i)
                // 表示字符串中某个位置的数字，即字符在字符串中的下标。
            }
        },
        delNum(){
            var oEvent = window.event; 
            if (oEvent.keyCode == 8) { 
                if(this.realInput.length>0){
                    this.disInputs[this.realInput.length-1].value = '';
                }
            }
        },
        clickEvent(){
            this.realInput = this.realInput.replace(/\D/g,'')
            // console.log(this.realInput,this.disInputs);
            this.$emit('sendValueToParent',this.realInput);
        }
    }
}
</script>

<style lang="stylus" scoped>
.pay-pwd{
    padding-top:15px;
    .pay-password{
        height: 44px;
        margin: 0 23px;
        margin-top: 20px;
        margin-bottom: 10px;
        position: relative;
        .real-ipt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 42px;
            line-height: 42px;
            opacity: 0;
            z-index: 3;
            -webkit-appearance: none;
            text-indent: -999em; /*文本向左缩进*/
            margin-left: -100%; /*输入框光标起始点向左左移*/
            width: 200%; /*输入框增大一倍*/
            opacity: 0;
        }
        .surface-ipts {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 42px;
            line-height: 42px;
            z-index: 1;
            overflow: hidden;
            .surface-ipt {
                height: 42px;
                line-height: 42px;
                display: flex;
                justify-content: space-between;
                input {
                    flex: 1;
                    height: 42px;
                    line-height: 42px;
                    border: 0;
                    border-top: 1px solid #BFBFBF;
                    border-left: 1px solid #BFBFBF;
                    border-bottom: 1px solid #BFBFBF;
                    color: #666;
                    font-size: 23px;
                    text-align: center;
                    padding: 0;
                    border-radius:0;
                    -webkit-appearance: none;
                    &:first-child{
                        border-top-left-radius:5px;
                        border-bottom-left-radius:5px;
                    }
                    &:last-child{
                        border-right: 1px solid #BFBFBF;
                        border-top-right-radius:5px;
                        border-bottom-right-radius:5px;
                    }
                }
            }
        }
    }
}

</style>
